<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
	<title>抽奖式抽签结果</title>
	<link href="${ctx}/resource/css/simpleLots.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- BEGIN HEADER -->
	<!-- 菜单及导航数据  -->
    <data id="info" nav="lots" menu="" service="抽签服务" action="抽奖式抽签结果"></data>
    
	<!--content start-->
	 <div class="row wrapper border-bottom white-bg page-heading animated rotateIn min-height" >
	      <div class="col-lg-12 page-heading">
			<div class="portlet-body form" style="min-height:500px;">
				<input type="hidden" name="" value="${candidateList.size() }" id="listSize"/>
				<c:forEach items="${candidateList }" var="cand" varStatus="st">
					<input type="hidden" name="persons" id="${st.index+1 }" value="${cand.uid }" />
				</c:forEach>
				<div id="oprateArea">
					<div class="pageMash" ></div>
					<div class="map">
						<div>
							<span class="importa">
								<input class="importaa" type="text" name="textfield" style="  width: 200px;  height: 60px; margin-top:50px;" readonly="readonly" id="nu"/>
							</span>
							<span class="extract"><img id="b1" src="${ctx}/resource/image/simpleLots_rrr.png" title="点击按钮开始抽奖"/></span>
						</div>
					</div>
					<div id="LayMain" class="LayMain LayDashed">
						<div id="LayMainTop" class="LayMainTop LayDashed">恭喜
							<span id="LaySpan" title="关闭" class="LaySpan">
								<img src="${ctx}/resource/image/simpleLots_close-btn.png" />
							</span>
							<div id="LayMainMiddle" class="LayMainMiddle">LayMainMiddle</div>
						</div>
					</div>
				</div>
				
				<div> 
              		<table class="table table-hover" >
	               		<tr> 
	               			<th width="300dp" style="text-align: center;">抽中者</th> 
	               			<th width="300dp" style="text-align: center;">发起时间</th> 
	               			<th width="300dp" style="text-align: center;">参与人数</th> 
	               		</tr> 
	               		<tr style="background-color: rgba(198, 87, 63, 0.3);"> 
	               			<td width="300dp" style="text-align: center;"><span id="lotsResult">${record.uid }</span></td>
	               			<td width="300dp" style="text-align: center;"><fmt:formatDate value="${record.startTime}" type="both"/></td> 
	               			<td width="300dp" style="text-align: center;">${candidateList.size() }</td>
                		</tr> 
	               	</table> 
               </div>
			</div>
		</div>
	</div>
 
 
	<js>

	<script>
	 	$(function(){
	 		$("#b1").toggle(
				  function () {
				    alert(1);
				  },
				  function () {
				    alert(221);
				  }
				);
	 		
	 		return ;
	 		
	 		if($("#lotsResult").text()!=""){
	 			layer.msg("此次抽签已经结束！");
	 			$("#b1").hide();
				return;
	 		}

 			$("#resultArea").hide();
 			var isLayBtnOKClick = false;
 			var t=${lotsEvent.amount};
 			var time = t==""?1:t//总次数
 			var count = 0;//已抽签次数
 			var lid="${param.lid}";
 			
 			var interval;
 			
 			// ----------------------------------------------------------
			//初始化数据
			var num = $("#listSize").val(); //定义要随机的名单的初始长度
			var speed = 2; //定义速度,每10ms变一次
			var startnum = 0;
			//初始化名单
			var a = new Array(num);
			for ( var i = 0; i < num; i++) {
				a[i] = $("#" + (i + 1)).val();
			}
			
			//点击开始按钮注册事件
			$("#b1").toggle(function() {
				if(count > time) {
					layer.alert('已经抽完了，敬请期待下次开奖！', {
					    icon: 7,
					    skin: 'layer-ext-seaning' 
					}) 
					clearInterval(interval);
					return ;
				}
				//初次点击随机点名
				interval = setInterval(function() {
					startnum = Math.round(Math.random()*num*10);//随机数取整数部分
					startnum = startnum % num;
					nu.value = a[startnum];
				}, speed);
				$(this).attr("src","${ctx}/resource/image/simpleLots_rrs.png");
				count++;
			}, function() {
				isLayBtnOKClick = true;
				$(this).attr("src","${ctx}/resource/image/simpleLots_rrr.png");
				//再次点击停止转动
				clearInterval(interval);
				//获取选中的值,将其状态置为1,表示已经被选择过了
				var name = $("#nu").val();
				for ( var i = 0; i < num - 1; i++) {
					if (a[i] == name) {
						var temp = a[num - 1];
						a[num - 1] = null;
						a[i] = temp;
					}
					num = num - 1;//数组长度-1
				}
				
				// 保存结果
				if(count == time){
				$.ajax({
					type : "POST",
					url : "${ctx}/lots/record/save.do",
					dataType:"json",
					data : {
						"name" : name,
						"lid" : lid
					},
					success : function(msg) {
						layer.msg("此次抽奖记录已保存！",{
							icon:1,
							time:1000
						});
						location.reload("${ctx}/lots/simple.html?lid="+lid);
					}
					});
				}
				count++;
			});
 			// ----------------------------------------------------------
				
				
 			document.onkeydown = function (event){

 				var e=event||window.event;
 				var keyCode=e.keyCode||e.which;//e.which 兼容FF
 				
 				var target=e.srcElement||e.target;
 				
 				if (keyCode ==32) {
 					if (isLayBtnOKClick) {
 						document.getElementById("LayBtnOK").click();
 						isLayBtnOKClick = false;
 					} else {
 						document.getElementById("b1").click();
 					}
 					return false;
 				}
 			};
	 	})
	</script>
	</js>
</body>	
</html>